import React, { useState, useEffect, useRef } from 'react';
import './index.css'; // 引入轮播图的样式
import { Button, Modal } from 'antd';
import Instantly from '../Instantly';

const Carousel: React.FC = () => {
    const datass = [
        {
            title: '品牌IP',
            image: 'https://cdn.dancf.com/fe-assets/20231123/58c35764824aa5a9328fe6f875cfd9a1.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
            color: '#f7ce41',
        },
        {
            title: '营销设计',
            image: 'https://cdn.dancf.com/fe-assets/20231123/390c051fb5179fa858b60cab928e38c3.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
            color: '#f580ff',
        },
        {
            title: '包装设计',
            image: 'https://cdn.dancf.com/fe-assets/20231123/106097d363efe1bd2f3dea874ef87895.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
            color: '#1df6cf',
        },
        {
            title: '设计赛事',
            image: 'https://cdn.dancf.com/fe-assets/20231123/277df1172edd214069a61546178e6ea5.png?x-oss-process=image/format,webp/quality,Q_30/interlace,1',
            color: '#3284ff',
        },
    ];

    const [currentIndex, setCurrentIndex] = useState(0);
    const totaldatass = datass.length;
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentIndex((prevIndex) => (prevIndex + 1) % totaldatass);
        }, 2000);
        return () => clearInterval(interval);
    }, [totaldatass]);

    const handleDotClick = (index: number) => {
        setCurrentIndex(index);
    };

    const [showConsultationMask, setShowConsultationMask] = useState(false);

    const handleConsultClick = () => {
        setShowConsultationMask(!showConsultationMask);
    };
    return (
        <div className="carousel">
            <p className='rh'> 融合优势资源 <br /> 为企业定制独一无二的 </p>
            <div className="carousel-title-container">
                <div
                    className="carousel-title"
                    key={currentIndex} Add to trigger re-render
                    style={{ color: datass[currentIndex].color }}
                >
                    {datass[currentIndex].title}
                </div>
            </div>
            <div className="carousel-dots">
                {datass.map((_, index) => (
                    <div
                        key={index}
                        className={`dot ${currentIndex === index ? 'active' : ''}`}
                        onClick={() => handleDotClick(index)}
                    />
                ))}
            </div>
            <div className='db-box'>
                <Button type="primary" onClick={showModal}>
                    立即咨询
                </Button>
                <Modal footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Instantly></Instantly>
                </Modal>
            </div>
            <div className="carousel-image" key={currentIndex}> {/* Add key to trigger re-render */}
                <img src={datass[currentIndex].image} alt={datass[currentIndex].title} />
            </div>
        </div>
    );
};

export default Carousel;